<template>
  <div>
    <h1>双向绑定</h1>
    <div class="form">
      <p>用户名：<input v-model.trim="formInfo.username" type="text" /></p>
      <p>年&emsp;龄: <input v-model.number="formInfo.age" type="text" /></p>
      <p>介&emsp;绍<textarea v-model.lazy="formInfo.text"></textarea></p>
    </div>
    <p>
      选择家乡：
      <select v-model="formInfo.selected">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
      </select>
    </p>
    <p>
      <!-- 多选框需要一个数组变量 -->
      选择爱好: 吃饭：<input v-model="formInfo.hobby" type="checkbox" value="吃饭" />
      睡觉：<input v-model="formInfo.hobby" type="checkbox" value="睡觉" />
      打豆豆：<input v-model="formInfo.hobby" type="checkbox" value="打豆豆" />
    </p>
    <p><button @click="reg">注册</button></p>
  </div>
</template>

<script>
/**
 * 双向数据绑定
 * 数据变化 -> 视图自动同步
 * 视图变化 -> 数据自动同步
 */
/**
 * v-model
 * 1.使用场景：表单开发(登录、注册)
 * 2. 作用：可以自动获取用户输入或者选择的值
 */
export default {
  data() {
    return {
      formInfo: {
        username: "zh",
        age: 18,
        text: '我是谁',
        selected: "北京",
        hobby: ["吃饭", "睡觉"],
      },
    };
  },
  methods: {
    reg() {
      /**
       * 1.校验
       * 2.获取表单值
       * 3.调用后台接口，发送Ajax保存进数据库
       */
      console.log(this.formInfo);
      console.log(this.formInfo.username, this.formInfo.age, this.formInfo.selected, this.formInfo.hobby[0]);
      console.log(JSON.stringify(this.formInfo));
    },
  },
};
</script>

<style>
</style>